<template>
	<view class="conter">
	<uni-nav-bar :fixed="true" shadow :background-color="navClor" status-bar title="中医数字" :border="false" :shadow="false" left-icon="left" @clickLeft="back"/>
		<view class="ming">
			<image src="../../static/txiang.png"></image>
		</view>
		<view class="conter_box">
			<view class="wenti">
				<view class="wenti_title">
					<view class="wenti_title_left">
						试试看这么问我
					</view>
					<view class="wenti_title_right">
						<div class="title_right_box">
							<image src="../../static/shuaxin.png" mode=""></image>
							<view class="sx_text">
								换一换
							</view>
						</div>
						
					</view>
				</view>
				<view class="wenti_box">
					<view class="wenti_txt" v-for="item,index in wenti" :key="index" v-text="item"></view>
				</view>
		
			</view>
			<view class="tip" v-text="jiqirenTxt">
				
			</view>
		</view>
		<view class="input_box">
			<input class="uni-input" focus placeholder="请输入" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title:"中医数字",
				jiqirenTxt:'您好，我是您的专属数字人推荐官林墨，很高兴为您服务，请告诉我您的问题或需求，我将尽力为您解决~',
				wenti:["数字人可以用多种语言进行交流吗？","数字人可以用多种语言进行交流吗？","数字人可以用多种语言进行交流吗？","数字人可以用多种语言进行交流吗？"],
				navClor: "rgba(255, 255, 255, 0)"
			}
		},
		methods: {
			back(){
				uni.navigateBack(-1)
			}
		},
		onPageScroll: function(e) {
			if (e.scrollTop > 1) {
				this.navClor = 'rgba(255, 255, 255, 1)'
			}else{
				this.navClor = 'rgba(255, 255, 255, 0)'
			}
		}
	}
</script>

<style lang="scss">
.conter{
	background-image: url("https://a1.qpic.cn/psc?/V12obLfG48bPoN/TmEUgtj9EK6.7V8ajmQrELQEdpWFggBvaieRar6Xa4DOxEGpaDeohRAvM62gkDhnick*qTVD1iFmL*K8cKoBr5bs5fwtKHgPAHDPQAlb5ig!/b&ek=1&kp=1&pt=0&bo=0ALgBdAC4AUDJwI!&tl=1&vuin=2664244587&tm=1734156000&dis_t=1734158548&dis_k=970bc0677d7ee2e1f4977efe3086caec&sce=60-2-2&rf=viewer_4");
	width: 100vw;
	height: 100vh;
	.ming{
		border-radius: 27rpx 23rpx 23rpx 23rpx;
		height: 517rpx;
		margin:  60rpx 60rpx 0;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 70rpx;
		>image{
			width: 100%;
			height: 100%;
		}
	}
	.conter_box{
		display: flex;
		flex-wrap: wrap;
		gap: 6rpx;
		.wenti{
			width: calc(100% - 60rpx);
			margin: 0 30rpx  ;
			height: 347rpx;
			background: #F7F9FF;
			box-shadow: 10rpx 11rpx 26rpx 4rpx rgba(127,192,176,0.34);
			border-radius: 16rpx;
			.wenti_title{
				width: 100%;
				height: 78rpx;
				display: flex;
				.wenti_title_left{
					width: 50%;
					height: 78rpx;
					background: #00C9D4;
					border-radius: 16rpx 0 50% 0 ;
					font-family: AlibabaPuHuiTiB;
					font-weight: 400;
					font-size: 38rpx;
					color: #FFFFFF;
					text-align: center;
					line-height: 78rpx;
				
				}
				.wenti_title_right{
					height: 78rpx;
					display: flex;
					justify-content: flex-end;
					width: 50%;
					.title_right_box{
						display: flex;
						align-items: center;
						gap: 10rpx;
						padding-right: 30rpx;
						>image{
							width: 21rpx;
							height: 21rpx;
						}
						.sx_text{
							font-family: AlibabaPuHuiTiM;
							font-weight: 400;
							font-size: 26rpx;
							color: #00B6CE;
						}
						
					}
				}
			}
			.wenti_box{
				width: 100%;
				padding: 40rpx;
				.wenti_txt{
					font-family: SourceHanSansCN;
					font-weight: 400;
					font-size: 29rpx;
					color: #555A65;
					line-height: 47rpx;
				}
			}
	
		}
		.tip{
			width: 663rpx;
			height: 207rpx;
			background: #F7F9FF;
			border-radius: 26rpx;
			border: 0.39px solid #00C9D4;	
			margin: 30rpx 40rpx 0;
			font-family: SourceHanSansCN;
			font-weight: 400;
			font-size: 29rpx;
			color: #00B6CE;
			line-height: 46rpx;
			padding: 40rpx;
		}
	}
	.input_box{
		width: 100%;
		padding: 0 30rpx;
		position: absolute;
		bottom: 0;
		width: calc(100% - 60rpx);
		height: 120rpx;
		>input{
			padding: 0 30rpx;
			height: 78rpx;
			background: #FFFFFF;
			box-shadow: -10rpx -11rpx 26rpx 4rpx rgba(127,192,176,0.29);
			border-radius: 39rpx;
		}
	}
}
</style>
